window.addEventListener('keydown',function(event){
    //evevt 包含 键值
    let keyCode=event.keyCode;
    // console.log(keyCode);
    let audioEle=
    document.querySelector(`audio[data-key="${keyCode}"]`);
    console.log(audioEle);
    if (!audioEle) return;
    audioEle.play();
    
    let keyEle=
        document.querySelector(`div[data-key="${keyCode}"]`);
    if (!keyEle) return;
    console.log(keyEle);
    keyEle.classList.add('playing');
    // //定时器
    // setTimeout(function(){
    //     keyEle.classList.remove('playing');
    // },1000);
});

const keys=document.querySelectorAll('.key');
for (let key of keys){
    console.log(key);
    // event 一个个加，不能集体加
    //css transition 属性执行后 会有一个transitioned事件
    key.addEventListener('transitionend',function(event){
        //不同类型的事件，event的对象也是不同的，
        // console.log(event,'---------');
        event.target.classList.remove('playing');
    })
};